// 金铲铲 首图 详情图 生成
import { getURLBase64Image, loadImages, drawImagesAreaBg,drawBgBorder } from "./getUrlImg";

// 生成金铲铲首图
export async function makeTitleImgJCC(data, list, attrs) {
  console.log('attrs: ', attrs);
  return new Promise(async (resolve, reject) => {
    // 取出已选择项
    let yingsiongList = [];
    let qipanList = [];
    list = list.split(",");
    console.log('list: ', list);
    if (!list || list == []) {
      reject("多选不能为空");
    }
    if (list && list.length) {
      attrs.forEach(async (item1) => {
        if (item1.aavName == "f18"||item1.aavName == "f2"||item1.aavName == "f3"||item1.aavName == "f4"||item1.aavName == "f5") {
          // 找出小小英雄
          item1.childAttributes.forEach(async (item2) => {
            if (list.indexOf(String(item2.id))>-1&&item2.imgUrl) {
              yingsiongList.push(item2)
            }
          });
        }
        if (item1.aavName == "f6"||item1.aavName == "f7"||item1.aavName == "f8") {
          // 找出棋盘
          item1.childAttributes.forEach(async (item2) => {
            if (list.indexOf(String(item2.id))>-1&&item2.imgUrl) {
              qipanList.push(item2)
            }
          });
        }
     
      });
    }

    try {
      const mainBg = await getURLBase64Image(
        "https://imgv2.zuyoul.com/2c97e7c992b353af0192b70241d505cc.jpg"
      );
      const canvas = document.createElement("canvas");
      const context = canvas.getContext("2d");
      canvas.width = mainBg.width;
      canvas.height = mainBg.height;
      context.drawImage(mainBg, 0, 0, mainBg.width, mainBg.height);
      context.fillStyle = "#ffffff";
      // 左侧展示
      context.font = "bold 46px Adobe Ming Std";
      //  // 设置文字阴影的颜色
      //  context.shadowColor = "#1A496A";
      //  // 轻微模糊阴影
      //  context.shadowBlur = 3;
       // 设置描边的样式、宽度以及颜色
       context.strokeStyle = '#1A496A';
       context.lineWidth = 2;
      //  context.shadowOffsetY = 2; // 阴影相对于文本的水平偏移量
      context.fillText(`${data.thirdId || "--"}`, 190, 340); //编号
      context.fillText(`${data.systemName + data.carrierName || "--"}`, 190, 476);//区服
      context.fillText(`${data.f12 || "--"}`, 300, 620);//小小英雄
      context.fillText(`${data.f13 || "--"}`, 190, 760);//棋盘
      context.fillText(`${data.f14 || "--"}`, 190, 900);//特效
      // 绘制描边
      context.strokeText(`${data.thirdId || "--"}`, 190, 340); //编号
      context.strokeText(`${data.systemName + data.carrierName || "--"}`, 190, 476);//区服
      context.strokeText(`${data.f12 || "--"}`, 300, 620);//小小英雄
      context.strokeText(`${data.f13 || "--"}`, 190, 760);//棋盘
      context.strokeText(`${data.f14 || "--"}`, 190, 900);//特效
      //  加载皮肤图片
      context.font = "bold 23px Adobe Ming Std";
      // 设置描边的样式、宽度以及颜色
      // context.strokeStyle = '#000';
      // context.lineWidth = 1;
   
      let skinImgs1 = [];
      let skinImgs2 = [];
      if (yingsiongList && yingsiongList.length) {
        skinImgs1 = await loadImages(yingsiongList, 18);
      } 
      if (qipanList && qipanList.length) {
        skinImgs2 = await loadImages(qipanList, 6);
      } 
      // .sort(sortBy("sort"))
      // let instances = skinImgs.length ? skinImgs : [];
      if (skinImgs1 && skinImgs1.length) {
        const skinbg = await getURLBase64Image(
          // "https://imgv2.zuyoul.com/2c97e7c992ae51130192b34bf2dc1c80.jpg"
          '/static/img/skinbg.png'
        );
        
        // 开始绘制
        let opts = {
          startX: 570,
          startY: 324,
          rowNum:6,
          stepY: 16,
          stepX: 16,
          txtLineHeight: 20,
          imgWidth1: 216,
          imgHeight: 280,
          txtInside:true,
          defaultSkinbg:skinbg,
          round:20
        };
        
        drawImagesAreaBg(context, skinImgs1, opts);
      }
      if (skinImgs2 && skinImgs2.length) {
        const qipanbg = await getURLBase64Image(
          // "https://imgv2.zuyoul.com/2c97e7c992ae51130192b34eb6e61c81.jpg"
          '/static/img/qipanbg.png'
        );
        // 开始绘制
        let opts = {
          startX: 2044,
          startY: 324,
          rowNum:2,
          stepY: 16,
          stepX: 16,
          txtLineHeight: 20,
          imgWidth1: 216,
          imgHeight: 280,
          defaultSkinbg: qipanbg,
          txtInside:true,
          round:20
        };
        drawImagesAreaBg(context, skinImgs2, opts);
      }
      // 绘制结束
      const base64Url = canvas.toDataURL("image/jpeg", 0.8);
      resolve(base64Url);
    } catch (error) {
      reject(error);
    }
  });
}

// // 生成详情图-金铲铲 多图
export async function makeDetailImgJCC(data, skins, attrs) {
  return new Promise(async (resolve, reject) => {
    // 定义一个整体图片的数组
    let imgPageArr = [];
    let commonIndex = 0; //定义一个全局的皮肤数
    let imgNUm = -1; //图片页数  数量
    let typeArrNum = -1; //每页图的分组数量
    // 双重循环 遍历所有皮肤
    for (let i = 0; i < skins.length; i++) {
      // 遍历不同类型的皮肤
      const typeMap = skins[i];
      if (typeMap.list.length > 0) {
        for (let j = 0; j < typeMap.list.length; j++) {
          // 遍历到皮肤
          let skin = typeMap.list[j];
          // 本次遍历不绘制  只将每张图片的内容区分开
          if (commonIndex === 0) {
            typeArrNum = -1;
            imgPageArr = [[]];
            imgPageArr[0].push({
              typeName: typeMap.name,
              skins: [],
            });
            imgNUm++;
            typeArrNum++;
          }
          if (commonIndex % 70 == 0 && commonIndex != 0) {
            typeArrNum = -1;
            imgPageArr.push([]);
            imgPageArr[imgNUm + 1].push({
              typeName: typeMap.name,
              skins: [],
            });
            imgNUm++;
            typeArrNum++;
          } //每张图片展示70个皮肤

          if (j == 0 && commonIndex % 70 != 0) {
            // 分组开始  在分页中创建分组数组
            imgPageArr[imgNUm].push({
              typeName: typeMap.name,
              skins: [],
            });
            typeArrNum++;
          }
          if (skin.imgUrl) {
            imgPageArr[imgNUm][typeArrNum].skins.push(skin);
          } else {
            typeMap.list.splice(j, 1);
            j--;
            continue;
          }
          commonIndex++;
        }
      }
    }
 
    // 绘制图片
    let imgsArr = [];
    if (imgPageArr && imgPageArr.length) {
      for (let k = 0; k < imgPageArr.length; k++) {
        let base64Img = await makeDetailImgWwqyOne(imgPageArr[k], data);
        imgsArr.push(JSON.stringify(base64Img));
        if (k == imgPageArr.length - 1) {
          resolve(imgsArr);
        }
      }
    }
  });
}
// 绘制一个 金铲铲 详情图
async function makeDetailImgWwqyOne(typeArr, data) {
  ////console.log("%c Line:203 🍌 typeArr", "color:#93c0a4", typeArr);
  // 先计算当前页图片的高度
  let lineHeight = 273;
  let skinHeight = 0;
  let lineNum = 0;
  let skinNum = 0;
  if (typeArr && typeArr.length) {
    for (let i = 0; i < typeArr.length; i++) {
      let typeMap = typeArr[i];
      lineNum = lineNum + Math.ceil(typeMap.skins.length / 7);
      for (let j = 0; j < typeArr[i].skins.length; j++) {
        let url = typeArr[i].skins[j].imgUrl;
        let kz1 = typeArr[i].skins[j].kz1;
        if (url) {
          try {
            skinNum++;
            const temp = await getURLBase64Image(url);
            typeArr[i].skins[j].image = temp;
            if (kz1 && kz1.indexOf("http") > -1) {
              typeArr[i].skins[j].skinSign = await getURLBase64Image(kz1);
            }
          } catch (error) {}
        } else {
          typeArr[i].skins.splice(j, 1);
          j--;
        }
      }
    }
  }
  skinHeight = Math.ceil(lineNum * lineHeight) + typeArr.length * 60 + 100 + 80; //所有皮肤 包括分类标题的高度  页尾距离
  //console.log("%c Line:217 🍪 skinHeight", "color:#fca650", skinHeight);

  // 开始创建画布
  let y = 140; //图的绘制时距离上端的距离
  let x = 47; //绘制皮肤时的x距离
  // 创建canvas实例
  const canvas = document.createElement("canvas");
  canvas.style.background = "#ffffff";
  const context = canvas.getContext("2d");
  canvas.width = 1500;
  canvas.height = Math.ceil(skinHeight);
  context.font = "40px Adobe Ming Std";
  // 下载分类名称背景
  let typeNameBg = await getURLBase64Image(
    "https://game.ikbh.top/makeImg/wangzhe/Wzry-subtitle-bg.png"
  );
   // 下载主背景
  let mainBgImg = await getURLBase64Image(
    "https://game.ikbh.top/makeImg/wangzhe/Wzry-bg.png"
  );
  // 下载头部背景
  let titleBg = await getURLBase64Image(
    "https://game.ikbh.top/makeImg/wangzhe/Wzry-titlebg2.png"
  );
  // 下载右上角装饰 
  let hpjyrg = await getURLBase64Image(
    "https://game.ikbh.top/makeImg/heping/hpjyrg.png"
  );
  // 开始绘制
 
  // 绘制背景图
  context.drawImage(mainBgImg, 0, 0, canvas.width, canvas.height);
  // 绘制标题背景
  context.drawImage(titleBg, 0, 0, canvas.width, 120);
  // 填充标题文字
  context.font = "bold 30px Adobe Ming Std";
  context.fillStyle = "#fff"; // 文字填充颜色
  // 头部标题 店铺名
  context.fillText(
    `${data.gameName || "--"}`,
    canvas.width / 2 - (data.gameName.length * 30) / 2,
    50
  );

  // 绘制主要区域的背景
  drawBgBorder(context, 30, 130, canvas.width - 60, skinHeight - 150, {
    radius: 12,
    borderWidth: 2,
    startColor: "rgba(54, 58, 98, 0.6)",
    endColor: "rgba(37, 44, 75, 0.6)",
    borderColor: "#FFD7A1",
  });
  // 绘制右上角装饰 hpjyrg
  context.drawImage(hpjyrg, 1482, 130, 5, 68);

  //
  // 开始绘制皮肤
  if (typeArr && typeArr.length) {
    for (let i = 0; i < typeArr.length; i++) {
      let typeMap = typeArr[i];
      for (let j = 0; j < typeMap.skins.length; j++) {
        let skin = typeMap.skins[j];
        if (j == 0) {
          // 分组开始  先绘制分类标题图片和分类名
          if (i != 0) {
            y += lineHeight;
          }
          context.drawImage(typeNameBg, 0, y - 100, 337, 229);
          context.font = "28px Adobe Ming Std";
          context.fillStyle = "#ffffff"; // 文字填充颜色
          let name = typeMap.typeName || "其他";
          // let txtWidth = name.length * 28;
          context.fillText(` ${name}`, 60, y + 25);
          y += 60;
          x = 47;
        }
        if (j % 8 == 0 && j != 0) {
          x = 47;
          y += lineHeight;
        }
        // 绘制每张图中的皮肤
        if (skin.image) {
          // 绘制皮肤图片
          context.drawImage(skin.image, x , y , 150, 223);
          if (skin.skinSign) {
            // 皮肤标签
            context.drawImage(
              skin.skinSign,
              x +25,
              y +150,
              100,
              40
            );
          }
          // 皮肤名称
          context.font = "20px Adobe Ming Std";
          context.fillText(
            ` ${skin.fieldName ? skin.fieldName : "未知"}`,
            x,
            y + 253
          );
          x += 179;
        }
      }
    }
  }
  return canvas.toDataURL("image/jpeg", 0.8);
}
